<template>
  <div>
    <el-input v-model="itemName" style="width: 240px" placeholder="护理项目名称" />
    <el-button plain @click="listNurseContent()" >查询</el-button>

    <el-button round type="primary" @click="back">返回</el-button>
    <el-divider />

    <el-row>
      <el-col :span="11">
        <h3 style="height:40px;color:white;background-color:#3ca2e0;line-height:40px;margin:0px">护理项目</h3>
        <el-table :data="nurseContentList" stripe style="width: 100%" @row-click="addItemToLevel">
          <el-table-column type="index" label="序号" width="80"/>
          <el-table-column prop="serialNumber" label="编号"  />
          <el-table-column prop="nursingName" label="名称"  />
          <el-table-column prop="servicePrice" label="价格"  />
          <el-table-column prop="executionCycle" label="执行周次"  />
          <el-table-column prop="executionTimes" label="执行次数"  />
        </el-table>

        <el-pagination
          v-model:current-page="page"
          @current-change="handleCurrentChange"
          size="small"
          background
          layout="prev, pager, next"
          :total="total"
          class="mt-4"
        />
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="12">
        <h3 style="height:40px;color:white;background-color:#3ca2e0;line-height:40px;margin:0px">护理项目({{ levelName }})</h3>
        <el-table :data="nurseContentListByLevelId" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="80"/>
          <el-table-column prop="serialNumber" label="编号"  />
          <el-table-column prop="nursingName" label="名称"  />
          <el-table-column prop="servicePrice" label="价格"  />
          <el-table-column prop="executionCycle" label="执行周次"  />
          <el-table-column prop="executionTimes" label="执行次数"  />
          <el-table-column  label="操作">
            <template #default="scope">
              <el-button type="danger" size="mini" @click="deleteItemToLevel(scope.row)">X</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    

  </div>
</template>

<script>
import NurseContentApi from '@/api/NurseContent.js'
import NurseLevelApi from '@/api/NurseLevel.js'
  export default {
    data() {
      return {
        itemName: '',
        nurseContentList:[],
        page: 1,
        pageSize: 10,
        total: 0,
        levelName:'',
        levelId:'',
        nurseContentListByLevelId:[]
      }
    },
    methods: {
      deleteItemToLevel(row){
        if(confirm('确定删除吗？')){
          NurseLevelApi.deleteItemToLevel({
            itemId:row.id,
            levelId:this.levelId
          }).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.listNurseContent();
            this.listNurseContentByLevelId();
          })
        }
      },
      listNurseContentByLevelId(){
        NurseLevelApi.listNurseItemByLevel({
          levelId:this.levelId,
        }).then(res => {
          this.nurseContentListByLevelId = res.data
        })
      },
      addItemToLevel(row){
        NurseLevelApi.addItemToLevel({
          itemId:row.id,
          levelId:this.levelId
        }).then(res=>{
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.listNurseContent();
          this.listNurseContentByLevelId();
        })
      },
      handleCurrentChange(val) {
        this.page = val
        this.listNurseContent()
      },
      listNurseContent(){
        NurseContentApi.findNurseItemPage({
          page: this.page,
          pageSize: this.pageSize,
          itemName: this.itemName,
          levelId:this.levelId,
          status: 1
        }).then(res => {
          this.nurseContentList = res.data.records
          this.total = res.data.total
        })
      },
      back() {
        this.$router.push({
          path: '/nurseLevel'
        })
      }
    },
    created() {
      // 获取路由参数
      this.levelId = this.$route.query.levelId;
      this.levelName = this.$route.query.levelName;

      this.listNurseContent();
      this.listNurseContentByLevelId();
    }
  }
</script>

<style scoped>

</style>